<template>
  <div class="box">
    <!-- <el-row :span="24">
      <el-col :span="8" :push="4"> -->
        <div class="main">
          <div class="main_personal">
            <div style="display: flex;">
              <img :src=messageList.avatar style="width:100px;height: 120px;">
              <div class="personal_message">
              <div style="height: 40px;margin-bottom: 20px;">
                <span>{{ messageList.memberName }}</span>
                <span>{{ messageList.employmentSituation }}</span>
                <span>{{ messageList.memberSex }}</span>
              </div>
              <div style="height: 40px;">
                <span><img src='@/assets/people.png'>{{ messageList.memberNation }}·{{ messageList.memberBirthday }}</span>
                <span v-if="messageList.politicalLandscape != '其他政党'"><img src='@/assets/politicalLandscape.png'>{{ messageList.politicalLandscape }}</span>
                <span v-if="messageList.politicalLandscape == '其他政党'"><img src='@/assets/politicalLandscape.png'>{{ messageList.otherPolitical }}</span>
                <span><img src='@/assets/educationalLevel.png'>{{ messageList.educationalLevel }}</span>
                <span><img src='@/assets/memberHometown.png'>{{ messageList.memberHometown }}</span>
              </div>
              <div style="height: 40px;">
                <span><img src='@/assets/idcard.png'>{{ messageList.idCard }}</span>
                <span><img src='@/assets/phone.png'>{{ messageList.phone }}</span>
                <span><img src='@/assets/email.png'>{{ messageList.email }}</span>
              </div>
              </div>
            </div>
            <div class="main_button" v-if="status == 0">
              <button @click="submitForm('allow')">通过</button>
              <button @click="submitForm('refuse')">不通过</button>
            </div>
          </div>
          <div class="main_basic_message" >
            <div class="top" style="display: flex;">
              <span>基本信息</span>
              <div/>
            </div>
            <div class="basic_message" style="display: flex;padding:26px 10px">
              <div class="basic_message_left" style="width: 680px;">
                <div>
                  <p><span>工作单位</span> {{ messageList.workUnit }}</p>
                  <p><span style="margin-right: 58px;">职务</span> {{ messageList.duties }}</p>
                </div>
                <div>
                  <p><span>办公电话</span> {{ messageList.tel }}</p>
                  <p><span style="margin-right: 58px;">传真</span> {{ messageList.facsimile }}</p>
                </div>
                <div>
                  <p><span>通信地址</span> {{ messageList.communicationAddress }}</p>
                </div>
                <div>
                  <p><span>兴趣爱好</span> {{ hobby }}{{ messageList.otherHobby }}</p>
                  <p><span>邮政编码</span> {{ messageList.zipCode }}</p>
                </div>
                <div>
                  <p><span>秘书助理</span> {{ messageList.secretary }}</p>
                  <p><span>秘书手机</span> {{ messageList.secretaryPhone }}</p>
                </div>
              </div>
              <div class="basic_message_right">
                  <p>社会任职</p>
                  <span v-for="(item,index) in messageList.mainDutiesDtos" :key="index">
                    <p>{{ item.organization }}{{ item.duties }}</p>
                  </span>
              </div>
            </div>
          </div>
          <div class="main_enterprise">
            <div class="top" style="display: flex;">
              <span>企业信息</span>
              <div/>
            </div>
            <div style="display: flex;padding:26px 10px">
              <table align="center" border="1" width="1090px" cellspacing="0" >
                <tr>
                  <td>企业性质</td>
                  <td>{{ messageList.enterpriseNature }}</td>
                  <td>所属行业</td>
                  <td>{{ industry }}</td>
                </tr>
                <tr>
                  <td>主营业务</td>
                  <td colspan="3">{{ messageList.mainBusiness }}</td>
                </tr>
                <tr>
                  <td>营业执照注册号</td>
                  <td>{{ messageList.businessNo }}</td>
                  <td>企业组织代码</td>
                  <td>{{ messageList.enterpriseCode }}</td>
                </tr>
                <tr>
                  <td>注册资金(万)</td>
                  <td>{{ messageList.registeredCapital }}</td>
                  <td>固定资产总额(万)</td>
                  <td>{{ messageList.fixedTotalAssets }}</td>
                </tr>
                <tr>
                  <td>上年度销售收入(万)</td>
                  <td>{{ messageList.lastSalesRevenue }}</td>
                  <td>上年度纳税额(万)</td>
                  <td>{{ messageList.lastPayTaxes }}</td>
                </tr>
                <tr>
                  <td>公司网址</td>
                  <td>{{ messageList.companyWebsite }}</td>
                  <td>员工人数</td>
                  <td>{{ messageList.staffNumber }}</td>
                </tr>
              </table>
            </div>
            <div>
              <el-timeline>
                <el-timeline-item
                  class="timeLine"
                  color="#2854B7"
                  >
                  <span class="font">企业符合的条件</span>
                  <ul>
                  <li v-for="(item,index) in messageList.companyEligibles" :key="index">
                    {{ item }}
                  </li>
                  </ul>
                </el-timeline-item>
                <el-timeline-item
                  color="#2854B7">
                  <span class="font">会员符合的条件</span>
                  <ul>
                  <li v-for="(item,index) in messageList.personalEligibles" :key="index">
                    {{ item }}
                  </li>
                  </ul>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <div class="main_otherMessge">
            <div class="top" style="display: flex;">
              <span>其他信息</span>
              <div/>
            </div>
            <div v-for="(item,index) in otherMessage" :key="index"  class="otherMessage_box">
              <div>
              <div/>
              {{ item.title }}
              </div>
              <div>{{ item.body }}</div>
            </div>
          </div>
        </div>
      <!-- </el-col>
    </el-row> -->

    <el-dialog
      title='填写拒绝原因'
      :visible.sync="open"
      width="30%">
        <el-input v-model="refuseRemark"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitRefuse">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMemberDetail,auditingMember,getCondition } from '@/api/member'
export default {
  data() {
    return {
      //详细信息
      messageList:[],
      //弹窗
      open:false,
      //拒绝原因
      refuseRemark:'',
      //其他信息
      otherMessage:[],
      //兴趣爱好
      hobby:'',
      //所属行业
      industry:'',
      //页面是查看还是审核
      status:0,
    };
  },
  created() {
    this.getMessage()
  },
  methods: {
    //获取详细信息
    getMessage(){
      if(this.$route.query.status){
        this.status = this.$route.query.status
      }
      let params = this.$route.query.key
      getMemberDetail(params).then(res =>{
            if(res.code === 200){
              this.messageList = res.data
              //性别判断
              if(this.messageList.memberSex == 0){
                this.messageList.memberSex = '女'
              }else if(this.messageList.memberSex == 1){
                this.messageList.memberSex = '男'
              }
              //装载otherMessge
              this.otherMessage.push({
                title:'个人简历及获奖情况',
                body:res.data.resume
              },{
                title:'企业简历及获奖情况',
                body:res.data.companyIntroduction
              },{
                title:'社会贡献(近三年捐赠情况)',
                body:res.data.socialContribution
              },{
                title:'对第六届协会建设的建议',
                body:res.data.proposal
              }
            ),
            //处理兴趣爱好
            this.messageList.hobbies.forEach((item,index) =>{
              if(item != '其他爱好'){
                if(this.messageList.hobbies.length != index+1){
                  this.hobby += item+','
                }else{
                  this.hobby += item
                }
              }
            })
            this.messageList.industry.forEach((item,index) =>{
              if(this.messageList.industry.length != index+1){
                this.industry += item+'/'
              }else{
                this.industry += item
              }
            })
            //处理民族
            getCondition().then((res) => {
              if (res.code === 200) {
                  res.data.memberNations.forEach((item,index)=>{
                    if(this.messageList.memberNation == item.cid){
                      this.messageList.memberNation = item.content
                      return
                    }
                  })
              }
            });
            }
          })
    },
    //是否通过审核
    submitForm(data){
      if(data == 'allow'){
         let params = {
          mid:this.messageList.mid,
          refuseRemark:this.refuseRemark,
          status:2
        }
        auditingMember(params).then(res =>{
        if(res.code === 200){
          setTimeout(this.back(),1000)
        }
        })
      }else if(data == 'refuse'){
        this.open = true
      }
    },
    //拒绝审核
    submitRefuse(){
      let params = {
        mid:this.messageList.mid,
        refuseRemark:this.refuseRemark,
        status:3
      }
        auditingMember(params).then(res =>{
        if(res.code === 200){
          this.open = false
          setTimeout(this.back(),1000)
        }
      })
    },
    //返回页面操作
    back() {
      this.$router.push({ path: 'usermanage' })
    },
  },
};
</script>
<style lang="scss" scoped>
.box{
  background-color: #F5F5F5;
  padding:49px 24px;
  display: flex;
  justify-content: center;
  align-content: center;
}
.main{
  border-top:5px solid #2854B7;
  background-color: white;
  width:1192px;
  display: flex;
  flex-direction: column; 
  padding:36px;
}
.main_personal{
  display: flex;
  justify-content: space-between;
  margin-bottom:36px;
}
.personal_message{
  display: flex;
  flex-direction: column;
  margin:0px 24px;
  height: 120px;
}
.personal_message > div:nth-child(n+2) > span{
  font-size:14px;
  color: #6B7E98;
  margin-right: 54px;
  >img{
    margin-right: 14px;
  }
}
.personal_message > div:first-child > span:first-child{
  font-size:26px;
  color: #000000;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  margin-right: 16px;
}
.personal_message > div:first-child > span:nth-child(2){
  width: 37px;
  height: 23px;
  background-color: #2854B7;
  color: white;
  padding:6px;
  font-size: 12px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  margin-right: 10px;
}
.personal_message > div:first-child > span:nth-child(3){
  width:26px;
  height: 23px;
  background-color: #DFE9FF;
  color:#2854B7;
  padding:6px;
  font-size: 12px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
}
.main_button{
  align-content: center;
}
.main_button > button:first-child{
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
    background: #2854B7;
    width: 80px;
    height: 36px; 
    border:none;
}
.main_button > button:nth-child(2){
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 15px;
    color: #333333;
    background: #E1E2E5;
    width: 80px;
    height: 36px; 
    border:none;
    margin-left:16px;
}
.top > span{
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left:8px;
}
.top >div{
  border-bottom: 1px solid #E5E5E5;
  height:15px;
  width:1030px;
  padding-bottom:-20px;
  margin-left:15px
}
.top::before{
  content: '';
  width:3px;
  background:#2854B7;
  height: 20px;
  border-radius: 2px;
}
.basic_message_left > div {
  > p >span{
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 15px;
    color: #607490;
    margin-right:28px;
  }
  > p {
  width:330px;
  }
  display: flex;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
}
.basic_message_right{
  border-left:1px solid #E5E5E5;
  padding-left: 45px;
}
.basic_message_right > p{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #607490;
}
.basic_message_right > span{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
}
.main_enterprise > div > table > tr{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  line-height: 46px;
  
  td:nth-child(n){
    color: #607490;
    background: #F4F5F7;
    width: 160px;
    padding-left:19px;
    border:#D7D9DD 1px solid;
  }
  td:nth-child(2n){
    color: #000000;
    padding-left:19px;
    background: white;
  }
}
.main_enterprise > div > table{
  border:none;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #607490;
}
.el-timeline ul{
  list-style-type: disc;
  margin-left:-20px;
  margin-top:23px
}
.el-timeline{
  margin-left:-25px;
  margin-top:26px;
}
.otherMessage_box{
  margin-top: 30px;
  > div:first-child{
    background: #F4F5F7;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 15px;
    color: #607490;
    display: flex;
    line-height: 46px;
    > div{
      border-radius: 50%;
      border: 4px solid #2854B7;
      width:12px;
      height: 12px;
      margin:16px 8px 17px 17px;
    }
  }
  > div:nth-child(2){
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 15px;
    margin:28px 38px 28px 17px;
    color: #000000;
  }
}
.font::before{
  content:'';
  width:6px;
  height: 5px;
  border-radius: 50px;
  background:white;
  position: absolute;
  left:2px;
  top:7px;
}
</style>
